<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  </title>
    <style>
        /* ul li:first-child{
            color: red;
        } */
        /* ul li:nth-child(1){
            color: red;
        } */

    </style>
</head>
<body>
    <ul>
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
        <li>元素4</li>
    </ul>
    
</body>
<script src="../lib/jquery.min.js"></script>
<script>
    $(function(){
        // $("ul li:first-child").css('color','red');
        // $("ul li:nth-child(1)").css('color','red');

        //使用过滤器选择 eq gt lt
        //eq索引  gt大于 lt小于 用于指定索引过滤元素，要牢记索引是从0 开始的
        $("ul li:lt(1)").css('color','red');
    });
</script>
</html>